"use strict";
/**
 * 初始化界面
 * @constructor
 */
class InitBaidu {
    constructor() {
        this.listItems = [
            "<span class='num1'>1</span>&nbsp;江泽民同志逝世 享年96岁",
            "<span class='num2'>2</span>&nbsp;江泽民同志治丧委员会名单",
            "<span class='num3'>3</span>&nbsp;江泽民同志遗像发布",
            "<span class='num'>4</span>&nbsp;神十五成功对接空间站组合体",
            "<span class='num'>5</span>&nbsp;联合国安理会为江泽民默哀一分钟",
            "<span class='num'>6</span>&nbsp;北京天安门等地下半旗为江泽民志哀",
            "<span class='num'>7</span>&nbsp;街道工作人员上门打人 湖南浏阳通报",
            "<span class='num'>8</span>&nbsp;被法子英劳荣枝案改变的人生",
            "<span class='num'>9</span>&nbsp;广州番禺：解除所有防控临时管控区",
            "<span class='num'>10</span>&nbsp;官方：全国快递网点大面积停摆不实热",
            "<span class='num'>11</span>&nbsp;冷空气发威 上海已见初雪",
            "<span class='num'>12</span>&nbsp;韩国队输球后炸鸡啤酒股价暴跌",
            "<span class='num'>13</span>&nbsp;揭秘核子基因10年“带病”狂奔路",
            "<span class='num'>14</span>&nbsp;欧阳娜娜自创品牌被指“割韭菜”",
            "<span class='num'>15</span>&nbsp;劳荣枝不服死刑判决庭上态度嚣张",
            "<span class='num'>16</span>&nbsp;梅德韦杰夫称北约应忏悔并解散",
            "<span class='num'>17</span>&nbsp;亚洲第一球星正在被韩国网民网暴",
            "<span class='num'>18</span>&nbsp;贝克汉姆在卡塔尔酒店房间内景曝光",
            "<span class='num'>19</span>&nbsp;专家：核酸检测公司该不该上市",
            "<span class='num'>20</span>&nbsp;上海收紧防控 部分区通知储备物资",
            "<span class='num'>21</span>&nbsp;宝沃汽车正式宣告破产",
            "<span class='num'>22</span>&nbsp;劳荣枝案时间线",
            "<span class='num'>23</span>&nbsp;老人养的近4000只鸭子被投毒",
            "<span class='num'>24</span>&nbsp;“小馄饨皮”王子的父亲",
        ];
        /**
         * 切换CSS显示样式
         * @param element 切换样式的元素
         * @param type 显示效果
         */
        this.switchCSS = (element, type) => {
            element.css({ display: type });
        };
        /**
         * 改变切换颜色按钮样式
         * @param circle
         * @param offset
         * @param bottomEllipse
         * @param color
         */
        this.changeColorBtnStyle = (circle, offset, bottomEllipse, color) => {
            circle.css({
                left: `${offset}px`,
            });
            bottomEllipse.css({
                backgroundColor: color,
            });
        };
        /**
         * 切换颜色按钮的单击响应函数
         */
        this.switchColorBtnClick = () => {
            this.changeColorIndex++;
            let grayscale = this.changeColorIndex % 2 === 0 ? "grayscale(1)" : "grayscale(0)";
            $("html").css({
                filter: `${grayscale}`,
            });
            let circle = this.doms.changeColor.children(".circle");
            let bottomEllipse = this.doms.changeColor.children(".bottom-ellipse");
            if (baidu.changeColorIndex % 2 === 0) {
                this.changeColorBtnStyle(circle, 0, bottomEllipse, "gray");
            }
            else {
                this.changeColorBtnStyle(circle, 30, bottomEllipse, "#007afe");
            }
        };
        /**
         * 切换登录方式
         */
        this.switchLogin = () => {
            this.doms.accountLogin.toggleClass("active");
            this.doms.noteLogin.toggleClass("active");
        };
        /**
         * 搜索内容
         */
        this.search = () => {
            let commitValue = baidu.doms.input.val();
            window.open(`https://cn.bing.com/search?q=${commitValue}`);
        };
        /**
         * 添加文件弹出框
         */
        this.addFile = () => {
            let file = $("<input class='myadd' type='file'/>");
            file.css({
                display: "none",
            });
            $("body").append(file);
            file.trigger("click");
            file.remove();
        };
        /**
         * 清除搜索内容框的内容
         */
        this.clearSearchContext = () => {
            this.doms.input.val("");
            this.switchCSS(this.doms.clearInput, "none");
        };
        /**
         * 显示清除搜索框按钮
         */
        this.showClearInput = () => {
            this.doms.input.val() && !this.isOpenCamera
                ? this.switchCSS(this.doms.clearInput, "block")
                : this.switchCSS(this.doms.clearInput, "none");
        };
        /**
         * 改变热搜显示
         */
        this.changeHotSearch = () => {
            for (let i = 0; i < this.doms.list.length; i++) {
                this.doms.list.eq(i).html(this.listItems[this.listItemsIndex]);
                this.listItemsIndex++;
                if (this.listItemsIndex === this.listItems.length) {
                    this.listItemsIndex = 0;
                }
            }
        };
        /**
         * 打开图片界面
         */
        this.openCamera = () => {
            this.switchCSS(baidu.doms.clearInput, "none");
            this.switchCSS(baidu.doms.camera, "none");
            this.switchCSS(baidu.doms.crmeraDialog, "block");
            this.lastInputValue = baidu.doms.input.val();
            this.doms.input.attr("placeholder", "在此处粘贴图片网址");
            this.doms.input.val("");
            this.isOpenCamera = true;
        };
        /**
         * 关闭图片界面
         */
        this.closeCamera = () => {
            baidu.switchCSS(baidu.doms.camera, "block");
            baidu.switchCSS(baidu.doms.clearInput, "block");
            baidu.switchCSS(baidu.doms.crmeraDialog, "none");
            baidu.doms.input.attr("placeholder", "");
            baidu.doms.input.val(baidu.lastInputValue);
            this.isOpenCamera = false;
        };
        /**
         * 点击其他地方关闭图片界面
         * @param event
         */
        this.elseCloseCamera = (event) => {
            let arr = Array.from(this.doms.crmeraDialog[0].children);
            if (event.target === this.doms.input[0] ||
                event.target === this.doms.camera[0] ||
                event.target === this.doms.crmeraDialog[0] ||
                event.target.className === "myadd" ||
                arr.includes(event.target)) {
                return;
            }
            if (this.doms.crmeraDialog.css("display") === "block") {
                this.doms.cameraClose.trigger("click");
            }
        };
        this.doms = {
            accountLogin: $(".account-login"),
            noteLogin: $(".note-login"),
            loginFloatLayer: $(".login-float-layer"),
            closeHeader: $(".close-header"),
            login: $(".login"),
            changeColor: $(".button"),
            submit_btn: $(".submit-btn"),
            changeHotSearch: $("#change"),
            list: $(".item"),
            camera: $(".camera"),
            crmeraDialog: $(".crmera-dialog"),
            selectFile: $(".select-file"),
            cameraClose: $(".close"),
            input: $(".input"),
            clearInput: $(".clear-input"),
        };
        this.changeColorIndex = 0;
        this.lastInputValue = "";
        this.listItemsIndex = 6;
        this.isOpenCamera = false;
    }
}
let baidu = new InitBaidu();
baidu.doms.accountLogin.on("click", baidu.switchLogin);
baidu.doms.noteLogin.on("click", baidu.switchLogin);
baidu.doms.closeHeader.on("click", () => {
    baidu.switchCSS(baidu.doms.loginFloatLayer, "none");
});
baidu.doms.login.on("click", () => {
    baidu.switchCSS(baidu.doms.loginFloatLayer, "block");
});
baidu.doms.input.on("keydown", (event) => {
    if (event.key === "Enter") {
        baidu.search();
    }
});
baidu.doms.input.on("keyup", baidu.showClearInput);
baidu.doms.changeColor.on("click", baidu.switchColorBtnClick);
baidu.doms.submit_btn.on("click", baidu.search);
baidu.doms.changeHotSearch.on("click", baidu.changeHotSearch);
baidu.doms.camera.on("click", baidu.openCamera);
baidu.doms.cameraClose.on("click", baidu.closeCamera);
baidu.doms.selectFile.on("click", baidu.addFile);
baidu.doms.clearInput.on("click", baidu.clearSearchContext);
/**
 * 点击页面其他地方关闭图片框
 */
$(window).on("click", (event) => {
    baidu.elseCloseCamera(event);
});
